<template>
  <div>
    <!-- <div id="quill-toolbar"></div> -->
    <div id="editor"></div>

    <div v-show="showReference">
      <ul>
        <li
          v-for="item in selectList"
          :key="item.value"
          @click="handleClickSelectItem(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts" name="YEditor">
import "quill/dist/quill.snow.css";
import { onMounted } from "vue";
import Quill, { Delta } from "quill";
import { editorOptions } from "./editor-config";
let quillEditor: Quill | null = null;

const cursorIndex = ref(0);
const showReference = ref(false);
type SelectItem = {
  name: string;
  value: string;
};
const selectList = ref<SelectItem[]>([
  { name: "选项1", value: "1" },
  { name: "选项2", value: "2" },
  { name: "选项3", value: "3" },
]);
onMounted(() => {
  quillEditor = new Quill("#editor", editorOptions);

  const initialContent = JSON.stringify({"ops":[{"insert":"123456"},{"insert":{"reference-block":{"id":"1","name":"选项1"}}},{"insert":"/123345\n"}]});
  
  const delta = new Delta(JSON.parse(initialContent));
  quillEditor.setContents(delta)

  quillEditor.on(
    "text-change",
    (delta: Delta, oldDelta: Delta, source: string) => {
      // source 数据变化来源：'user' | 'api' | 'silent'
      // console.log(delta); // 获取编辑器内容
      // console.log(oldDelta); // 获取编辑器文本内容
      // console.log(source); // 获取编辑器触发事件的来源

      if (source !== "user") {
        // 非用户操作，不做处理
        return;
      }

      const range = quillEditor!.getSelection();

      for (const op of delta.ops) {
        if (typeof op.insert === "string" && ["/", "{"].includes(op.insert)) {
          // 打开弹窗选择去
          console.log("打开弹窗");
          handleShowReference();
          cursorIndex.value = range!.index;
        }
      }
    }
  );
});

/**
 * 打开弹窗选择引用
 */
function handleShowReference() {
  showReference.value = true;
}

function handleClickSelectItem(item: SelectItem) {
  // 插入数据内容

  const insertText = ` ${item.value}-${item.name} `
  cursorIndex.value -= 1

  // 第一行第一个字符光标位置 hack
  if (cursorIndex.value < 0) cursorIndex.value = 0;
  // 其他行第一个字符光标位置 hack
  if (quillEditor!.getText(cursorIndex.value,3).startsWith("\n")) {
    cursorIndex.value += 1;
  }
  // const node = findNode(nodeId)
  quillEditor!.insertEmbed(cursorIndex.value, 'reference-block', {
    id: item.value,
    name: item.name,
    label: insertText
  });
  cursorIndex.value += insertText.length;

  quillEditor!.deleteText(cursorIndex.value, 1);

  // insertContent(item.name)
  showReference.value = false;

  // 移动光标到后一个位置
  quillEditor!.setSelection(cursorIndex.value + 1, Quill.sources.API)

}
function insertContent(str: string) {
  if (quillEditor) {
    quillEditor.insertText(quillEditor.getLength() - 1, str, {
      color: "#f00",
      italic: true,
    });
  }
}

function getEditorContent() {
  if (quillEditor) {
    return quillEditor.getContents();
  }
  return null;
}
defineExpose({
  insertContent,
  getEditorContent,
});
</script>
<style lang="scss">
@use "./y-editor.scss";
</style>